<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <style>
      #remotes video {
        width: 320px;
      }
    </style>

    <title>Pion ion-sfu | Pubsubtest</title>
  </head>

  <body>
    <nav class="navbar navbar-light bg-light border-bottom">
      <h3>Pion</h3>
    </nav>
    <div class="container pt-4">
      <div class="row" id="start-btns">
        <div class="col-12">
          <button type="button" class="btn btn-primary" onclick="start(false)">
            Publish
          </button>
        </div>
      </div>

      <div class="row">
        <div class="col-6 pt-2">
          <span
            style="position: absolute; margin-left: 5px; margin-top: 5px"
            class="badge badge-primary"
            >Local</span
          >
          <video
            id="local-video"
            style="background-color: black"
            width="320"
            height="240"
          ></video>
          <div class="controls" style="display: none">
            <div class="row pt-3">
              <div class="col-3">
                <strong>Video</strong>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlLocalVideo(this)"
                      value="true"
                      name="optlocalvideo"
                      checked
                    />
                    Unmute</label
                  >
                </div>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlLocalVideo(this)"
                      value="false"
                      name="optlocalvideo"
                    />
                    Mute</label
                  >
                </div>
              </div>
              <div class="col-3">
                <strong>Audio</strong>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlLocalAudio(this)"
                      value="true"
                      name="optlocalaudio"
                      checked
                    />
                    Unmute</label
                  >
                </div>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlLocalAudio(this)"
                      value="false"
                      name="optlocalaudio"
                    />
                    Mute</label
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="remotes" class="col-6 pt-2">
          <span class="badge badge-primary">Remotes</span>

          <div class="row" id="enable-audio">
            <div class="col-12">
              <button
                type="button"
                class="btn btn-primary"
                id="enable-audio-button"
                onclick="enableAudio(false)"
              >
                Enable Audio
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/ion-sdk-js@1.5.5/dist/ion-sdk.min.js"></script>
    <script src="https://unpkg.com/ion-sdk-js@1.5.5/dist/json-rpc.min.js"></script>
    <script src="./main.js"></script>
  </body>
</html>
